<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>熙心健康体检系统</title>
  <style>
    * {
               margin: 0;
               padding: 0;
               box-sizing: border-box;
               font-family: 'Microsoft YaHei', sans-serif;
           }
          
           body {
               background-color: #f5f5f5;
           }
          
           /* 顶部黑色边框 */
           .header {
               background-color: #000;
               color: white;
               height: 60px;
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 0 20px;
               position: sticky;
               top: 0;
               z-index: 100;
           }
          
           .header-title {
               font-size: 20px;
               font-weight: bold;
           }
          
           .admin-area {
               display: flex;
               align-items: center;
           }
          
           .admin-name {
               margin-right: 15px;
           }
   
           /* 修改为链接样式 */
           .logout-link {
               background-color: #ff0000;
               color: white;
               text-decoration: none;
               padding: 5px 10px;
               border-radius: 3px;
               display: inline-block;
           }
   
           .logout-link:hover {
               background-color: #cc0000;
           }
          
           /* 主体布局 */
           .container {
               display: flex;
               min-height: calc(100vh - 60px);
           }
          
           /* 左侧黑色边框导航 */
           .sidebar {
               width: 200px;
               background-color: #000;
               padding: 20px 0;
               position: sticky;
               top: 60px;
               height: calc(100vh - 60px);
               overflow-y: auto;
           }
          
           .nav-menu {
               list-style: none;
           }
          
           .nav-menu li {
               padding: 12px 20px;
           }
          
           .nav-menu a {
               color: white;
               text-decoration: none;
               display: block;
           }
          
           .nav-menu a:hover {
               color: #ddd;
           }

    .main-content {
      flex: 1;
      padding: 20px;
      background-color: #fff;
    }

    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .header-bar h2 {
      font-size: 16px;
      margin: 0;
    }

    .search-btn {
      padding: 6px 12px;
      font-size: 14px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.1s ease;
    }

    .search-btn:hover {
      background-color: #0056b3;
    }

    .search-btn:active {
      background-color: #004085;
      transform: scale(0.96);
    }

    .form-section, .table-section {
      background: white;
      padding: 20px;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }

    .form-row {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 15px;
      align-items: center;
    }

    .form-row label {
      min-width: 80px;
    }

    .form-row input,
    .form-row select {
      padding: 6px;
      font-size: 14px;
    }

    .radio-group {
      display: flex;
      align-items: center;
    }

    .radio-group input {
      margin-left: 10px;
      margin-right: 5px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }

    table thead {
      background-color: #f0f0f0;
    }

    table th, table td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: center;
    }

    .action-btn {
      padding: 4px 10px;
      font-size: 12px;
      margin: 0 2px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.1s ease;
    }

    .cancel-btn {
      background-color: #dc3545;
      color: white;
    }

    .cancel-btn:hover {
      background-color: #c82333;
    }

    .cancel-btn:active {
      background-color: #a71d2a;
      transform: scale(0.96);
    }

    .edit-btn {
      background-color: #17a2b8;
      color: white;
    }

    .edit-btn:hover {
      background-color: #138496;
    }

    .edit-btn:active {
      background-color: #11707f;
      transform: scale(0.96);
    }

    .pagination {
      text-align: center;
      margin-top: 15px;
    }

    .pagination button {
      padding: 6px 12px;
      margin: 0 5px;
      font-size: 14px;
      border: 1px solid #007bff;
      background-color: white;
      color: #007bff;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.1s ease;
    }

    .pagination button.active {
      background-color: #007bff;
      color: white;
    }

    .pagination button:active {
      transform: scale(0.96);
    }

    .footer {
      text-align: center;
      color: #666;
      margin-top: 30px;
    }

    .notice-text {
      margin-bottom: 10px;
      font-size: 14px;
      color: #999;
    }
  </style>
</head>
<body>
   <!-- 顶部黑色边框 -->
     <div class="header">
         <div class="header-title">熙心健康体检系统</div>
         <div class="admin-area">
             <span class="admin-name">系统管理员：admin</span>
             <!-- 修改为超链接 -->
             <a href="http://127.0.0.1:8848/xikangdemo1/team12/login.html" class="logout-link">OUT</a>
         </div>
     </div>
    
     <!-- 主体内容 -->
     <div class="container">
         <!-- 左侧黑色边框导航 -->
         <div class="sidebar">
             <ul class="nav-menu">
          <li><a href="http://127.0.0.1:8848/xikangdemo1/team12/shouye.html">首页</a></li>
                 <li><a href="http://127.0.0.1:8848/xikangdemo1/team12/order.html">体检预约</a></li>
                 <li><a href="http://127.0.0.1:8848/xikangdemo1/team12/orderlist.html">预约列表</a></li>
                 <li><a href="http://127.0.0.1:8848/xikangdemo1/team12/binglidemo.html">体检客户查询</a></li>
             </ul>
          </div>

    <div class="main-content">
      <div class="notice-text">当前位置：首页 / 预约列表</div>
      <div class="header-bar">
        <h2>体检客户查询</h2>
        <button class="search-btn">查询</button>
      </div>

      <div class="form-section">
        <div class="form-row">
          <label>手机号:</label>
          <input type="text" placeholder="输入搜索的手机号">
          <label>姓名:</label>
          <input type="text" placeholder="输入预约体检的客户信息">
          <label>性别:</label>
          <select>
            <option>选择性别</option>
            <option>男士</option>
            <option>已婚女士</option>
            <option>未婚女士</option>
          </select>
        </div>

        <div class="form-row">
          <label>预约院区:</label>
          <select>
            <option>选择院区地址</option>
            <option>沈阳熙康云医院-浑南院区</option>
            <option>沈阳熙康云医院-三好街院区</option>
            <option>沈阳熙康云医院-世纪大厦</option>
          </select>
          <label>套餐类型:</label>
          <select>
            <option>预约套餐</option>
            <option>23东软家属已婚女士套餐A</option>
            <option>23东软家属已婚女士套餐B</option>
            <option>23东软家属已婚女士套餐C</option>
            <option>23东软家属已婚女士套餐D</option>
          </select>
          <label>体检时间:</label>
          <input type="date">
        </div>

        <div class="form-row">
          <label>是否归档:</label>
          <div class="radio-group">
            <input type="radio" name="filed" checked> 未归档
            <input type="radio" name="filed"> 已归档
          </div>
        </div>
      </div>

      <div class="table-section">
        <h3>预约客户查询列表</h3>
        <table>
          <thead>
            <tr>
              <th>订单编号</th>
              <th>客户姓名</th>
              <th>客户手机号</th>
              <th>预约院区</th>
              <th>预约套餐</th>
              <th>预约时间</th>
              <th>是否归档</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <script>
              for (let i = 0; i < 7; i++) {
                document.write(`
                  <tr>
                    <td>2023100256211023</td>
                    <td>张一山</td>
                    <td>13100000000</td>
                    <td>沈阳熙康云医院-浑南院区</td>
                    <td>23东软家属已婚女士套餐C</td>
                    <td>2015-02-12</td>
                    <td>已归档</td>
                    <td>
                      <button class="action-btn cancel-btn">取消预约</button>
                      <button class="action-btn edit-btn">编辑</button>
                    </td>
                  </tr>
                `);
              }
            </script>
          </tbody>
        </table>

        <div class="pagination" id="pagination">
          <button class="page-btn" data-page="prev">❮</button>
          <button class="page-btn active" data-page="1">1</button>
          <button class="page-btn" data-page="2">2</button>
          <button class="page-btn" data-page="3">3</button>
          <button class="page-btn" data-page="4">4</button>
          <button class="page-btn" data-page="5">5</button>
          <button class="page-btn" data-page="next">❯</button>
        </div>

        <div class="footer">© 版权所有 东软集团  www.neusoft.com</div>
      </div>
    </div>
  </div>

  <script>
    const pagination = document.getElementById('pagination');
    const buttons = pagination.querySelectorAll('.page-btn');
    let currentPage = 1;
    const totalPages = 5;

    function updatePagination() {
      buttons.forEach(btn => {
        const page = btn.getAttribute('data-page');
        btn.classList.remove('active');

        if (page === String(currentPage)) {
          btn.classList.add('active');
        }

        if (page === 'prev') {
          btn.disabled = currentPage === 1;
        } else if (page === 'next') {
          btn.disabled = currentPage === totalPages;
        }
      });
    }

    pagination.addEventListener('click', (e) => {
      const target = e.target;
      if (!target.classList.contains('page-btn') || target.disabled) return;

      const page = target.getAttribute('data-page');
      if (page === 'prev') {
        if (currentPage > 1) currentPage--;
      } else if (page === 'next') {
        if (currentPage < totalPages) currentPage++;
      } else {
        currentPage = parseInt(page);
      }

      updatePagination();
    });

    updatePagination();
  </script>
</body>
</html>